<template>
	<view class="content linear-color">
		<view class="title-view" :style="{'padding-top':magringTopTitle+'px'}">
			<view @click="goback" style="flex: 1;display: flex;flex-direction: row;align-items: center;box-sizing: border-box;padding-left: 15px;">
				<image  :src="leftjiantou" style="width: 20px;" mode="widthFix"></image>
			</view>
			<view style="flex: 2;text-align: center;line-height: 35px;box-sizing: border-box;padding-right: 25px;">
				{{title}}
			</view>
			<view style="flex: 1;"></view>
		</view>
		<view class="jindu-box" :style="{'margin-top':magringTopTitle+50+'px'}">
			<view class="jindu-box-item">
				<view class="jindu-box-top">
					<view class="jindu-box-top-center">
						1
					</view>
				</view>
				<view class="jindu-text">填写信息</view>
			</view>
			<image class="jiantou-img" :src="jiantouUrl" mode="widthFix"></image>
			<view class="jindu-box-item">
				<view class="jindu-box-top">
					<view class="jindu-box-top-center">
						2
					</view>
				</view>
				<view class="jindu-text">下单预约</view>
			</view>
			<image class="jiantou-img" :src="jiantouUrl" mode="widthFix"></image>
			<view class="jindu-box-item">
				<view class="jindu-box-top">
					<view class="jindu-box-top-center">
						3
					</view>
				</view>
				<view class="jindu-text">免费上门</view>
			</view>
		</view>
		
		<view class="huishou-type-box">
			<view class="huishou-title"><text style="color: red;margin-right: 5px;">*</text> 预约回收类别</view>
			<view class="huishou-type-content">
				<view :class="['huishou-type-item', checkIndex == index ? 'huishou-type-item-select' : ''  ]" v-for="(item,index) in leibieList" :key='index' @click="select_huishou" :data-index="index">
					<image class="huishou-type-icon" :src="item.icon_image_url" ></image>
					<view class="huishou-type-text">{{item.title}}</view>
				</view>
			</view>
			<view class="huishou-weight-box">
				<view class="huishou-title" style="font-size: 15px;">物件重量</view>
				<picker class="" mode="selector" :range="leibeiWeight" range-key="weight" @change="selectWeightFun">
					<view class="huishou-weight-right">
						<view class="huishou-weight-item">{{selectWeight.weight}}</view>
						<image class="huishou-weight-right-img" :src="rightjiantou" mode="widthFix"></image>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="huishou-type-box">
			<view class="huishou-title"><text style="color: red;margin-right: 5px;">*</text> 取件信息</view>
			<view class="huishou-news-address">
				<view class="huishou-news-tip">上门地址</view>
				<view class="huishou-news-address-select" @click="gotoAddress">
					<view class="huishou-news-address-select-text">{{address_text}}</view>
					<image class="huishou-weight-right-img" :src="rightjiantou" mode="widthFix"></image>
				</view>
			</view>
			<view class="huishou-news-address">
				<view class="huishou-news-tip">上门时间</view>
				<picker mode="multiSelector" :range="timeArray"  @change="timeFunSelect" @columnchange='timeFun'>
					<view class="huishou-news-address-select">
						<view class="huishou-news-address-select-text">{{selectTime}}</view>
						<image class="huishou-weight-right-img" :src="rightjiantou" mode="widthFix"></image>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="huishou-type-box" style="margin-bottom: 180px;">
			<view class="huishou-title">补充信息 (选填)</view>
			<input class="buchong-input" type="text" placeholder="点击输入备注内容" v-model="remark">
			<view class="shiwu-title"><text style="color: red;margin-right: 5px;">*</text> 实物照片</view>
			<view class="add-shiwu-img-box">
				<view class="uploadImg-box" v-for="(item,index) in imageArray" :key="index">
					<image @click="deleteImgFun" :data-index='index' class="delete-img" :src="delete_img" mode=""></image>
					<image class="uploadImg" :src="item" mode=""></image>
				</view>
				<view class="add-shiwu-img" @click="uploadImgFun" v-if='imageArray.length < 3'>
					<view class="add-shu"></view>
					<view class="add-heng"></view>
				</view>
			</view>
			<view style="font-size: 14px;color: #999;margin-top: 5px;">(请上传的照片大小保持在每张3m内,最多3张)</view>
		</view>
		
		<view class="bottom-btn-box">
			<view class="bottom-btn-box-left">
				<view class="bottom-btn-box-title">
					预估总价 <view class="bottom-btn-box-money">¥{{money}}</view>
				</view>
				<view class="bottom-btn-box-left-xieyi">
					<checkbox-group @change="changeXiyi">
						<checkbox class="checkboxTip" :checked="checkboxXy" />
					</checkbox-group>
					<view class="bottom-btn-xieyi">阅读并同意 <text @click="fuwuxieyi" class="">《上门回收服务协议》</text></view>
				</view>
			</view>
			<view class="bottom-btn-box-right" @click="lijiFun">
				立即下单
			</view>
		</view>
		
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	export default {
		data() {
			return {
				title: '预约回收',
				mainColor:uni.getStorageSync('mianColor'),
				magringTopTitle:0,
				leftjiantou:baseUrl+'/uploads/static/image/left-jiantou.png',
				rightjiantou:baseUrl+'/uploads/static/image/right-jiantou.png',
				jiantouUrl:baseUrl+'/uploads/static/image/recovery_subscribe_img@2x.png',
				delete_img:baseUrl+'/uploads/static/image/recovery_address_manage_icon_delete@2x.png',
				address_text:'请选择上门地址',
				address_id:'',
				leibieList:[
					// {
					// 	url:baseUrl+'/uploads/static/image/recovery_subscribe_iphone@2x.png',
					// 	name:'智能手机',
					// 	id:'0'
					// },
					// {
					// 	url:baseUrl+'/uploads/static/image/recovery_subscribe_clothes_icon@2x.png',
					// 	name:'四季衣服',
					// 	id:'1'
					// },
					// {
					// 	url:baseUrl+'/uploads/static/image/recovery_subscribe_pc_icon@2x.png',
					// 	name:'办公电脑',
					// 	id:'2'
					// },
				],
				leibeiWeight:[],//类别重量数组
				selectWeight:{//选中重量对象
					// createtime: 1657699868
					// id: 2
					// items_id: 1
					// status: "normal"
					// status_text: "正常"
					// weigh: 2
					// weight: "25公斤~50公斤"
				},
				remark:'',
				timeArray:[//上门时间
					// ['9月06','9月07','9月08'],
					// ['08:00~9:00','09:00~10:00','10:00~11:00','11:00~12:00']
				],
				selectTime:'请选择上门时间',
				checkIndex:0,//选中的第几项
				checkboxXy:false,
				timeArrayOrgin:[
					{
						text:'08:00-09:00',
						time:new Date(new Date().toDateString() + ' 8:00').getTime(),
						start:'08:00',
						end:'09:00'
					},
					{
						text:'09:00-10:00',
						time:new Date(new Date().toDateString() + ' 9:00').getTime(),
						start:'09:00',
						end:'10:00'
					},
					{
						text:'10:00-11:00',
						time:new Date(new Date().toDateString() + ' 10:00').getTime(),
						start:'10:00',
						end:'11:00'
					},
					{
						text:'11:00-12:00',
						time:new Date(new Date().toDateString() + ' 11:00').getTime(),
						start:'11:00',
						end:'12:00'
					},
					{
						text:'12:00-13:00',
						time:new Date(new Date().toDateString() + ' 12:00').getTime(),
						start:'12:00',
						end:'13:00'
					},
					{
						text:'13:00-14:00',
						time:new Date(new Date().toDateString() + ' 13:00').getTime(),
						start:'13:00',
						end:'14:00'
					},
					{
						text:'14:00-15:00',
						time:new Date(new Date().toDateString() + ' 14:00').getTime(),
						start:'14:00',
						end:'15:00'
					},
					{
						text:'15:00-16:00',
						time:new Date(new Date().toDateString() + ' 15:00').getTime(),
						start:'15:00',
						end:'16:00'
					},
					{
						text:'16:00-17:00',
						time:new Date(new Date().toDateString() + ' 16:00').getTime(),
						start:'16:00',
						end:'17:00'
					}
				],
				yuyue_date:'',//预约时间日期
				yuyue_start_time:'',//预约开始时间
				yuyue_end_time:'',//预约结束时间
				imageArray:[],//上传图片
				money:'-',
			}
		},
		onLoad() {
			//计算右上角高度
			 let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			 this.magringTopTitle = menuButtonInfo.top
			 this.getTecycleFun()
			 this.timeArrayNow(0)
		},
		onShow(){
			this.address_text = uni.getStorageSync('address_text') ? uni.getStorageSync('address_text') : '请选择上门地址'
			this.address_id = uni.getStorageSync('address_id') ? uni.getStorageSync('address_id') : ''
		},
		methods: {
			getTecycleFun(){
				//获取回收类别
				let _this = this
				http.getTecycleType().then((res)=>{
					if(res.data.code == 1){
						let data = res.data.data
						_this.leibieList = data
						_this.leibeiWeight = data[0].recycleitemsweight //默认选中第一个
						_this.selectWeight = data[0].recycleitemsweight[0]
						let leibiePic = Number(data[0].price)
						_this.money = leibiePic*Number(_this.selectWeight.min) + '~' + leibiePic*Number(_this.selectWeight.max)
					}
				})	
			},
			select_huishou(e){
				//选中回收类别
				let select_index = e.currentTarget.dataset.index 
				this.checkIndex = select_index
				this.leibeiWeight = this.leibieList[select_index].recycleitemsweight 
				this.selectWeight = this.leibieList[select_index].recycleitemsweight[0]
				let leibiePic = Number(this.leibieList[select_index].price)
				this.money = leibiePic*Number(this.selectWeight.min) + '~' + leibiePic*Number(this.selectWeight.max)
			},
			selectWeightFun(e){
				this.selectWeight = this.leibeiWeight[e.detail.value]
				
				let leibiePic = Number(this.leibieList[this.checkIndex].price)
				this.money = leibiePic*Number(this.selectWeight.min) + '~' + leibiePic*Number(this.selectWeight.max)
			},
			timeArrayNow(type){
				//获取当前时间日期
				let nowDate = new Date()
				let nowYear = nowDate.getFullYear()
				let nowMonth = nowDate.getMonth()+1
				let oneDay = nowDate.getDate()
				let twoDay = nowDate.getDate()+1
				let threeDay = nowDate.getDate()+2
				let oneTime = nowYear + '-' + nowMonth.toString().padStart(2,'0') + '-' + oneDay.toString().padStart(2,'0')
				let twoTime = nowYear + '-' + nowMonth.toString().padStart(2,'0') + '-' + twoDay.toString().padStart(2,'0')
				let threeTime = nowYear + '-' + nowMonth.toString().padStart(2,'0') + '-' + threeDay.toString().padStart(2,'0')
				let dateArray = [oneTime,twoTime,threeTime] //需要的日期
				// console.log(dateArray)
				
				let nowTimeArray = [] //需要的时间段
				if(type == 0){//第一天
					let nowTime = new Date().getTime()
					this.timeArrayOrgin.forEach((item,index)=>{
						if(item.time > nowTime){
							nowTimeArray.push(item.text)
						}
					})
				}else{//第二，三天不处理
					this.timeArrayOrgin.forEach((item,index)=>{
						nowTimeArray.push(item.text)
					})
				}
				this.timeArray = [
					dateArray,
					nowTimeArray,
				]
			},
			
			timeFun(e){
				if(e.detail.column == 0 && e.detail.value == 0 ){
					this.timeArrayNow(0)
				}else{
					if(e.detail.column == 0){
						this.timeArrayNow()
					}
				}
			},
			timeFunSelect(e){
				let selectArrayIndex = e.detail.value
				if(this.timeArray[1].length < 9){
					let lengthIn = 9 - (this.timeArray[1].length - selectArrayIndex[1])
					if(!this.timeArrayOrgin[lengthIn].start){
						return false
					}
					this.yuyue_start_time = this.timeArrayOrgin[lengthIn].start
					this.yuyue_end_time = this.timeArrayOrgin[lengthIn].end
				}else{
					if(!this.timeArrayOrgin[selectArrayIndex[1]].start){
						return false
					}
					this.yuyue_start_time = this.timeArrayOrgin[selectArrayIndex[1]].start
					this.yuyue_end_time = this.timeArrayOrgin[selectArrayIndex[1]].end
				}
				this.selectTime = this.timeArray[0][selectArrayIndex[0]] +'~'+ this.timeArray[1][selectArrayIndex[1]]
				this.yuyue_date = this.timeArray[0][selectArrayIndex[0]]
				console.log(this.yuyue_date)
				console.log(this.yuyue_start_time)
				console.log(this.yuyue_end_time)
			},
			gotohuishou(){
				uni.redirectTo({
					url:'/pages/recover/recover'
				})
			},
			goback(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
			gotoAddress(){
				uni.navigateTo({
					url:'/pages/my/addressManage?type=select_address'
				})
			},
			changeXiyi(e){
				this.checkboxXy = e.detail.value.length > 0 ? true : false
			},
			deleteImgFun(e){
				let delect_index = e.currentTarget.dataset.index 
				this.imageArray.splice(delect_index,1)
			},
			uploadImgFun(){
				let _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function (res) {
						console.log(res);
						let access_token = uni.getStorageSync('X-Auth-Token')
						uni.uploadFile({
							fileType:"image",
							url: baseUrl+'/api/common/upload', //上传头像接口
							filePath: res.tempFilePaths[0],
							header:{
								'X-Auth-Token':access_token,
								"Content-Type": "multipart/form-data",
							},
							formData:{
								file:'file'//页面需要上传的字段
							},
							name: 'file',
							success: (uploadFileRes) => {
								var avatarRes = JSON.parse(uploadFileRes.data)
								if(avatarRes.code == 1){
									uni.showToast({
										title:'上传成功',
										icon:'success'
									})
									_this.imageArray.push(avatarRes.data.fullurl)
								}else{
									uni.showToast({
										title:'上传失败',
										icon:'error'
									})
								}
							   
							}
						});
					}
				});
			},
			lijiFun(){
				let _this = this
				const access_token = uni.getStorageSync('X-Auth-Token')
				if(this.checkboxXy){
					uni.showModal({
						title: '提示',
						content: '已确认信息无误，马上预约？',
						success: function (res) {
							if (res.confirm) {
								uni.showLoading()
								http.getYuyue({
									recycle_items_id:_this.leibieList[_this.checkIndex].id,
									recycle_items_weight_id:_this.selectWeight.id,
									address_id:_this.address_id,
									yuyue_date:_this.yuyue_date,
									yuyue_start_time:_this.yuyue_start_time,
									yuyue_end_time:_this.yuyue_end_time,
									remark:_this.remark,
									images:_this.imageArray.toString()
								},{
									"X-Auth-Token":access_token,
									'Content-Type': 'application/x-www-form-urlencoded'
								}).then((res)=>{
									console.log(res)
									uni.hideLoading()
									if(res.data.code == 1){
										uni.showToast({
											title:'提交成功',
											icon:'success'
										})
										setTimeout(function(){
											uni.redirectTo({
												url:'/pages/my/orderList'
											})
										},1500)
										
									}else{
										uni.showToast({
											title:res.data.msg,
											icon:'none'
										})
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
				}else{
					uni.showToast({
						title:'请同意服务协议',
						icon:'none'
					})
				}
			},
			fuwuxieyi(){
				http.getFuwu_index().then((res)=>{
					console.log(res)
					if(res.data.code == 1){
						uni.showModal({
							showCancel:false,
							title: res.data.data[0].question[0].title,
							content: res.data.data[0].question[0].content,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
			}
		},
		components:{
			
		}
	}
</script>

<style>
	.content{
		width: 100%;
		background: linear-gradient(#00CB8B 30%, #ffffff 30%);
		min-height: 100vh;
		overflow: hidden;
	}
	.title-view{
		width: 100%;
		text-align: center;
		color: #fff;
		font-weight: bold;
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		background: #00CB8B;
	}
	.jindu-box{width: 100%;height: 95px;display: flex;flex-direction: row;align-items: center;justify-content: center;}
	.jindu-box-item{width: 70px; height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;}
	.jindu-box-top{width: 35px;height: 35px;background: rgba(250,250,250,0.3);border-radius: 50%;}
	.jindu-box-top-center{width: 25px;height: 25px;background: #fff;margin: 5px auto;text-align: center;line-height: 25px;font-size: 14px;color: #00CB8B;border-radius: 50%;}
	.jindu-text{font-size: 14px;color: #fff;margin-top: 5px;}
	.jiantou-img{width: 40px;margin:0 13px;margin-bottom: 27px;}
	.huishou-type-box{width: calc(100% - 24px);margin: 0 auto;border-radius: 15px;background: #fff;box-shadow:0px 10px 10px 0 rgba(240,240,240,0.23);box-sizing: border-box;padding: 20px;margin-bottom: 30px;}
	.huishou-title{font-size: 17px;color: #333;font-weight: bold;}
	.huishou-type-content{width: 100%;margin-top: 20px;overflow: hidden;}
	.huishou-type-item{
		width:calc((100% - 30px) / 3);
		height: 84px;
		border-radius: 10px;
		border: 1.5px solid #fff;
		background: #F5FDFB;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		float: left;
		margin-left: 10px;
		margin-bottom: 10px;
	}
	.huishou-type-item:nth-of-type(3n+1){
		margin-left: 0px;
	}
	.huishou-type-item-select{border: 1.5px solid #00CB8B;}
	.huishou-type-icon{width: 30px;height: 30px;}
	.huishou-type-text{width: 100%;text-align: center;color: #333;font-size: 12px;margin-top: 7px;}
	.huishou-weight-box{width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-top: 20px;}
	.huishou-weight-right{display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
	.huishou-weight-item{padding: 2px 5px;background: #00CB8B;color: #fff;text-align: center;line-height: 28px;border-radius: 5px;font-size: 14px;}
	.huishou-weight-right-img{width: 16px;height: 16px;margin-left: 10px;}
	.huishou-news-address{width: 100%;margin-top: 20px;}
	.huishou-news-tip{font-size: 13px;color: #999;margin-bottom: 5px;}
	.huishou-news-address-select{width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
	.huishou-news-address-select-text{font-size: 15px;font-weight: bold;color: #333;}
	.buchong-input{width: 100%;height: 45px;background: #f9f9f9;box-sizing: border-box;padding-left: 15px;font-size: 14px;margin-top: 15px;border-radius: 5px;}
	.shiwu-title{width: 100%;font-size: 15px;margin-top: 25px;font-weight: bold;}
	.add-shiwu-img-box{width: 100%;overflow: hidden;margin-top: 10px;display: flex;flex-direction: row;}
	.add-shiwu-img{width: 69px;height: 69px;border: 1px solid #e5e5e5;background: #f6f6f6;position: relative;border-radius: 10px;margin-right: 10px;}
	.add-shu{position: absolute;width: 3px;height: 35px;border-radius: 3px;background: #d8d8d8;top: 17.25px;left: 33px;}
	.add-heng{position: absolute;width: 35px;height: 3px;border-radius: 3px;background: #d8d8d8;top: 33px;left: 17.25px;}
	.uploadImg-box{width: 70px;height: 70px;position: relative;border: 1px solid #d8d8d8;margin-right: 10px;}
	.uploadImg{width: 100%;height: 100%;}
	.delete-img{width: 20px;height: 20px;position: absolute;right: 0;top: 0;z-index: 10;background: rgba(0,0,0,0.8);}
	.bottom-btn-box{width: 100%;position: fixed;bottom: 0;left: 0;z-index: 20; height: calc(70px + env(safe-area-inset-bottom) /2);background: #fff;display: flex;flex-direction: row;justify-content: space-between;box-sizing: border-box;padding: 10px 20px 0px 20px;border-top: 1px solid #e5e5e5;}
	.bottom-btn-box-left{}
	.bottom-btn-box-title{font-size: 15px;color: #333;display: flex;flex-direction: row;align-items: center;font-weight: bold;}
	.bottom-btn-box-money{color: red;margin-left: 10px;}
	.bottom-btn-box-right{width: 110px;height: 45px;text-align: center;line-height: 45px;color: #fff;border-radius: 5px;background: #00CB8B;}
	.bottom-btn-box-left-xieyi{display: flex;flex-direction: row;align-items: center;margin-top: 5px;}
	.checkboxTip{transform:scale(0.7)}
	.bottom-btn-xieyi{font-size: 12px;}
	.bottom-btn-xieyi text{color: #00CB8B;}
</style>